<template>
  <div>
    <!-- 地图找房头部导航栏 -->
    <div>
      <van-nav-bar  title="地图找房" left-arrow @click-left="$router.back()" >
        <template #right ></template>
      </van-nav-bar>
    </div>
    <!-- 地图内容 -->
    <div>
      <baidu-map
        class="baidu-dt"
        :center="center"
        :zoom="zoom"
        @ready="initMap"
      >
        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <bm-marker
          :position="{ lng: 116.404, lat: 39.915 }"
          :dragging="true"
          animation="BMAP_ANIMATION_BOUNCE"
        >
          <!-- <bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/> -->
        </bm-marker>
        <!-- 地图类型控件 -->

        <bm-overlay
          v-for="(item, index) in list"
          :key="index"
          pane="labelPane"
          class="sample"
          @draw="draw($event, item.coord)"
        >
          <span>{{ item.label }}{{ item.count }}房子</span>
          <!-- drow 传参如果直接传参就会传给第一个参数，所有我利用$event方式给第一个 下面就可以将第二个参数传给{ longitude, latitude }解构出来的 -->
        </bm-overlay>
      </baidu-map>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'ElmentDemoApp',

  data() {
    return {
      center: { lng: 116.104, lat: 39.915 },
      // center: '上海',
      list: [
        {
          label: '杨浦',
          value: 'AREA|67fad918-f2f8-59df',
          coord: {
            latitude: '31.29397421',
            longitude: '121.5361245',
          },
          count: 107,
        },
        {
          label: '徐汇',
          value: 'AREA|a1417707-f2c1-e5ef',
          coord: {
            latitude: '31.194434',
            longitude: '121.43798',
          },
          count: 697,
        },
        {
          label: '普陀',
          value: 'AREA|b3e7fdc7-c67a-5684',
          coord: {
            latitude: '31.239297',
            longitude: '121.42746',
          },
          count: 182,
        },
        {
          label: '浦东',
          value: 'AREA|48bb555e-09d3-677b',
          coord: {
            latitude: '31.159254',
            longitude: '121.573916',
          },
          count: 468,
        },
        {
          label: '闸北',
          value: 'AREA|4ae7fdc5-2fda-87b7',
          coord: {
            latitude: '31.245238',
            longitude: '121.462705',
          },
          count: 75,
        },
        {
          label: '静安',
          value: 'AREA|f9842cb9-3dc8-556d',
          coord: {
            latitude: '31.240794',
            longitude: '121.462509',
          },
          count: 139,
        },
        {
          label: '黄浦',
          value: 'AREA|feeb90f1-db8b-7790',
          coord: {
            latitude: '31.216381',
            longitude: '121.505573',
          },
          count: 175,
        },
        {
          label: '宝山',
          value: 'AREA|b6ad32aa-0d1d-88d6',
          coord: {
            latitude: '31.31429863',
            longitude: '121.4163684',
          },
          count: 85,
        },
        {
          label: '闵行',
          value: 'AREA|5654197a-39af-6dc1',
          coord: {
            latitude: '31.162369',
            longitude: '121.376215',
          },
          count: 112,
        },
        {
          label: '青浦',
          value: 'AREA|38c39e6b-5dfa-0245',
          coord: {
            latitude: '31.181512',
            longitude: '121.271793',
          },
          count: 13,
        },
        {
          label: '虹口',
          value: 'AREA|0fc7aa90-2a6a-83be',
          coord: {
            latitude: '31.280439',
            longitude: '121.48269',
          },
          count: 72,
        },
        {
          label: '嘉定',
          value: 'AREA|fd4020b0-e01c-9faa',
          coord: {
            latitude: '31.330734',
            longitude: '121.260313',
          },
          count: 40,
        },
        {
          label: '奉贤',
          value: 'AREA|25fe0fdc-e9a1-982f',
          coord: {
            latitude: '31.002185',
            longitude: '121.43787',
          },
          count: 20,
        },
      ],
      zoom: 15,
    };
  },

  mounted() {
    // this.getMap()
  },

  methods: {
    // 获取接口地址
    async getMap() {
      const res = await axios({
        url: 'http://liufusong.top:8080/area/map?id=AREA%7Cdbf46d32-7e76-1196',
      });
      this.list = res.data.body;
      console.log('this.list', this.list);
    },
    initMap({ BMap, map }) {
      const myGeo = new BMap.Geocoder();
      myGeo.getPoint(
        '上海',
        function (point) {
          if (point) {
            console.log(point);
            map.centerAndZoom(point, 11);
          }
        },
        '上海'
      );
    },
    // 自定义覆盖物仅在地图发生变化时触发 draw 方法重绘覆盖物视图
    draw({ el, BMap, map }, { longitude, latitude }) {
      // https://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html
      // new BMap.Point
      // 以指定的经度和纬度创建一个地理点坐标
      const pixel = map.pointToOverlayPixel(
        new BMap.Point(longitude, latitude)
      );
      // 根据地理坐标获取对应的覆盖物容器的坐标，此方法用于自定义覆盖物
      // console.log(pixel)
      // {x: 389, y: 300}
      el.style.left = pixel.x - 60 + 'px';
      el.style.top = pixel.y - 20 + 'px';
    },
  },
};
</script>

<style lang="less" scoped>
/* 头部导航样式 */
/deep/.van-nav-bar,
.van-hairline--bottom {
  background-color:#21b97a;
  .van-icon,
  .van-icon-arrow-left,
  .van-nav-bar__arrow {
    color: #fff;
  }
  .van-nav-bar__title ,.van-ellipsis{
    color: #fff;
  }
}

.baidu-dt {
  width: 100%;
  height: 622px;
}
.bm-view {
  width: 100%;
  height: 600px;
}
.sample {
  width: 80px;
  height: 80px;
  line-height: 80px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  position: absolute;
}
</style>
